<template>
    <div class="community-container">
      <!-- 顶部内容 -->
      <div class="header">
        <h1>社区广场</h1>
        <p>发现有趣的话题，与志同道合的用户交流</p>
      </div>
  
      <!-- 主内容区域 -->
      <router-view class="content-area" />
  
      <!-- 底部导航栏 -->
      <el-menu
        :default-active="$route.path"
        mode="horizontal"
        class="bottom-nav"
        @select="handleNavSelect"
      >
        <el-menu-item index="/">
          <i class="iconfont icon-shop"></i>
          <span>商城</span>
        </el-menu-item>
        <el-menu-item index="/edu">
          <i class="iconfont icon-edu"></i>
          <span>农教</span>
        </el-menu-item>
        <el-menu-item index="/community">
          <i class="iconfont icon-community"></i>
          <span>社区</span>
        </el-menu-item>
      </el-menu>
    </div>
  </template>
  
  <script setup lang="ts">
  import { useRouter } from 'vue-router'
  
  const router = useRouter()
  
  const handleNavSelect = (key: string) => {
    if (key === '/') {
      router.replace({ path: '/' })
    } else {
      router.push(key)
    }
  }
  </script>
  
  <style scoped>
  .community-container {
    min-height: 100vh;
  }
  
  .header {
    padding: 40px 20px;
    text-align: center;
    background: #f5f7fa;
    border-bottom: 1px solid #eee;
  }
  
  .content-area {
    padding: 20px;
    margin-bottom: 80px; /* 为导航留出空间 */
  }
  
  .bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    border-top: 1px solid #eee;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
  }
  
  .el-menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 80px !important;
    transition: transform 0.3s;
  }
  
  .el-menu-item:hover {
    transform: translateY(-5px);
  }
  
  .el-menu-item i {
    font-size: 28px;
    margin-bottom: 6px;
    color: #666;
  }
  
  .el-menu-item span {
    font-size: 12px;
    color: #666;
  }
  
  /* 当前选中状态 */
  .el-menu-item.is-active {
    border-bottom: 4px solid #409EFF;
  }
  
  .el-menu-item.is-active i {
    color: #409EFF !important;
  }
  
  .el-menu-item.is-active span {
    color: #409EFF !important;
  }
  
  @media (max-width: 768px) {
    .bottom-nav {
      height: 60px !important;
    }
    
    .el-menu-item {
      height: 60px !important;
    }
    
    .el-menu-item i {
      font-size: 24px;
    }
    
    .el-menu-item span {
      font-size: 10px;
    }
  }
  </style>